<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <a-divider orientation="left"><span class="text-bold">{{ $ct("dynamicCheck", "动态校验") }}</span></a-divider>
            <a-form :form="form">
                <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="姓名">
                    <a-input v-decorator="[
                        'username',
                        { rules: [{ required: true, message: '请输入姓名' }] },
                    ]" placeholder="请输入姓名" />
                </a-form-item>
                <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="密码">
                    <a-input-password v-decorator="[
                        'password',
                        { rules: [{ required: true, message: '请输入密码' }] },
                    ]" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="昵称">
                    <a-input v-decorator="[
                        'nickname',
                        { rules: [{ required: checkNick, message: '请输入昵称' }] },
                    ]" placeholder="请输入昵称" />
                </a-form-item>
                <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                    <a-checkbox :checked="checkNick" @change="handleChange">
                        必须输入昵称
                    </a-checkbox>
                </a-form-item>
                <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="备注">
                    <a-textarea placeholder="请输入备注" :auto-size="{ minRows: 2, maxRows: 6 }" />
                </a-form-item>
                <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                    <a-button type="primary" @click="check">
                        提交验证
                    </a-button>
                    <span class="action-margin"></span>
                    <a-button @click="handleReset"><a-icon type="sync" />
                        重置表单
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
};
const formTailLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
};
export default {
    data() {
        return {
            checkNick: false,
            formItemLayout,
            formTailLayout,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
        };
    },
    methods: {
        check() {
            this.form.validateFields(err => {
                if (!err) {
                    console.info('success');
                }
            });
        },
        handleChange(e) {
            this.checkNick = e.target.checked;
            this.$nextTick(() => {
                this.form.validateFields(['nickname'], { force: true });
            });
        },
        handleReset() {
            this.form.resetFields();
        },
    },
};
</script>
